<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>个人中心</title>
  <script type="text/javascript" src="../js/main.js"></script>
  <!--引入vue3-->
  <script src="../js/vue3.2.6.global.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../element-plus/index.css">
  <!-- 引入组件库 -->
  <script src="../element-plus/index.full.js"></script>
  <script src="../element-plus/locale/zh-cn.js"></script>
  <script type="text/javascript" src="../js/axios.min.js"></script>
  <link rel="stylesheet" type="text/css" href="../css/main.css">
  <link rel="stylesheet" type="text/css" href="../css/home.css">
  <style>
    /*图标*/
    .icon{
      width: 14px;
      height: 14px;
    }
  </style>
</head>
<body>
<script>
  window.onload = function () {
    const App = {
      data(){
        return{
          user:{
            userInfo:{uid:'',avatar:'',roleId:'',account:'',username:''},
            userLevel:{growth:'',nextGrowth:'',level:'',rate:0},
          },
          userForm:{
            phone:'',
            birthday:'',
            sex:'M'
          },
          //用户关注列表
          subscribeList:[],
          src:src,
          //修改用户信息的弹框
          dialogFormVisible:false,
          updateAvatarURL:api+'userInfo/updateAvatar',
          activeIndex:'userInfo',
          //当前播放的视频
          currentVideo:'',
          radio:'1',
          reason:'',
          checkVideo:{
            currentPage:1,
            totalPage:1,
            totalSize:0,
            size:10,
            data:[]
          }
        }
      },
      methods:{
        handleSelect(key){
          console.log(key);
          this.activeIndex = key;
          sessionStorage.setItem("profile",key);
          if (key==='videoCheck'){
            this.getCheckVideo();
            return;
          }
          if (key==='userInfo') {
            this.getUserInfo();
            return;
          }
          if (key==='subscribe'){
            this.getSubscribeDetail();
            return;
          }
        },
        play(video){
          console.log(video);
          this.currentVideo = video;
          let vdo = document.getElementById("videoPlay");
          vdo.src = src+video.videoPath;
        },
        currentChange(val){
          this.checkVideo.currentPage = val;
          this.getCheckVideo();
        },
        getCheckVideo(){
          axios({
            url:api+'check/getCheckVideo',
            method:'get',
            params:{
              current:this.checkVideo.currentPage,
              size:this.checkVideo.size
            }
          }).then(res=>{
            console.log(res.data);
            if (res.data.result){
              this.checkVideo = res.data;
            }
          })
        },
        /*提交审核*/
        submitCheckVideo(){
          console.log(this.currentVideo);
          axios({
            url:api+'check/checkVideo',
            method: 'post',
            params:{
              snowFlakeId:this.currentVideo.snowFlakeId,
              status:this.radio,
              reason: this.reason
            }
          }).then(res=>{
            console.log(res.data);
            this.$message(res.data.message);
            this.getCheckVideo();
          })
        },
        //获取用户信息
        getUserInfo() {
          axios.get(api+'user/getUserDetails').then(res=>{
            if (res.data.result){
              this.user.userInfo = res.data.data.userInfo;
              this.user.userLevel = res.data.data.userLevel;
              this.userForm = res.data.data.userInfo;
              localStorage.setItem("user",JSON.stringify(res.data.data.userInfo));
            }
          })
        },
        //获取用户关注列表详情
        getSubscribeDetail(){
          axios.get(api+'user/subscribe/getSubscribeDetail').then(res=>{
            if (res.data.result){
              this.subscribeList = res.data.data;
            }
          })
        },
        //取消关注
        subscribe(autherId) {
          if (this.user.uid === '') {
            this.$message.warning('请先登录');
            return;
          }
          this.$confirm('是否取消关注?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(()=>{
            axios({
              url: api + 'user/subscribe',
              method: 'post',
              params: {
                uid: this.user.uid,
                flowerId: autherId,
                status: false
              }
            }).then(res => {
              if (res.data.result) {
                this.getSubscribeDetail();
              }
            })
          });
        },
        beforeFileUpload(file){
          const isJPG = file.type === 'image/jpeg';
          const isLt2M = file.size / 1024 / 1024 < 2;
          if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
          }
          return isJPG && isLt2M;
        },
        //上传成功
        uploadSuccess(response, file, fileList){
          console.log(response);
          this.$refs.avatarUpload.clearFiles(); //上传之后清除历史记录
          if (!response.result)
            this.$message.error(response.message);
          else
            this.getUserInfo();
        },
        //更新用户信息
        updateUser(){
          axios.post(api+'userInfo/updateUser',this.userForm).then(res=>{
            if (res.data.result){
              this.dialogFormVisible = false;
              this.getUserInfo();
            }else
              this.$message.warning(res.data.message);
          });
        },
        lDateFormat(date){
          this.userForm.birthday = date;
        }
      },
      mounted(){
        let localUser = JSON.parse(localStorage.getItem("user"));
        if (localUser!=null)
          this.user.userInfo = localUser;
        this.getUserInfo();
        this.activeIndex = sessionStorage.getItem("profile");
        if (this.activeIndex==='videoCheck')
          this.getCheckVideo();
      }
    };
    const app = Vue.createApp(App);
    app.use(ElementPlus,{
      locale: ElementPlus.lang.zhCn,
    });
    app.mount("#app");
  }
</script>
<div id="app">
  <el-container>
    <el-container style="height: 1200px">
      <el-aside style="width: 180px">
        <el-link :underline="false" style="margin-left: 8px" href="/">
          <h1 style="font-size: 24px">We Share</h1></el-link>
        <div>
          <el-avatar style="margin: 12px" :src="src+user.userInfo.avatar">user</el-avatar>
        </div>
        <el-menu
            :default-active="activeIndex"
            @select="handleSelect">
          <el-menu-item index="userInfo">
            <i class="el-icon-user"></i>
            <template #title>个人信息</template>
          </el-menu-item>
          <el-menu-item index="subscribe">
            <i class="el-icon-star-off"></i>
            <template #title>我的关注</template>
          </el-menu-item>
          <el-menu-item index="wallet">
            <i class="el-icon-wallet"></i>
            <template #title>我的钱包</template>
          </el-menu-item>
          <el-menu-item index="videoCheck">
            <i class="el-icon-film"></i>
            <template #title>视频审核</template>
          </el-menu-item>
          <el-menu-item index="message">
            <i class="el-icon-message"></i>
            <template #title>系统通知</template>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <div v-show="activeIndex=='userInfo'">
          <div style="width: 1200px">
            <!--个人信息-->
            <el-descriptions column="3" border>
              <template #title>
                <el-button type="primary" size="small" @click="dialogFormVisible = true">编辑</el-button>
              </template>
              <el-descriptions-item label-align="center" align="center">
                <template #label>
                  <i class="el-icon-picture-outline-round"></i>
                  头像
                </template>
                <el-avatar :size="60" :src="src+user.userInfo.avatar">user</el-avatar>
                <div style="margin: auto">
                  <el-upload ref="avatarUpload" :action="updateAvatarURL" name="picture" :show-file-list="false"
                             multiple :limit="1" :before-upload="beforeFileUpload" :on-success="uploadSuccess">
                    <el-button size="small" type="primary">更换头像</el-button>
                  </el-upload>
                </div>
              </el-descriptions-item>
              <el-descriptions-item label-align="center" align="center">
                <template #label>
                  <i class="el-icon-message"></i>
                  邮箱账号
                </template>
                {{this.user.userInfo.account}}
              </el-descriptions-item>
              <el-descriptions-item label-align="center" align="center">
                <template #label>
                  <i class="el-icon-user"></i>
                  用户名
                </template>
                {{this.user.userInfo.username}}
              </el-descriptions-item>
              <el-descriptions-item label-align="center" align="center">
                <template #label>
                  <i class="el-icon-medal"></i>
                  等级
                </template>
                {{this.user.userLevel.level}}
              </el-descriptions-item>
              <el-descriptions-item label-align="center" align="center">
                <template #label>
                  <i class="el-icon-notebook-1"></i>
                  成长值
                </template>
                <el-progress :percentage="user.userLevel.rate">
                  <span>{{this.user.userLevel.growth}}</span>
                  <span v-if="this.user.userLevel.nextGrowth!=null">/{{this.user.userLevel.nextGrowth}}</span>
                </el-progress>
              </el-descriptions-item>
              <el-descriptions-item label-align="center" align="center">
                <template #label>
                  <el-image class="icon" src="../img/icon/birthday.svg"></el-image>
                  生日
                </template>
                {{this.user.userInfo.birthday}}
              </el-descriptions-item>
              <el-descriptions-item label-align="center" align="center">
                <template #label>
                  <el-image class="icon" src="../img/icon/coin.svg"></el-image>
                  硬币
                </template>
                {{this.user.userInfo.coin}}
              </el-descriptions-item>
              <el-descriptions-item label-align="center" align="center">
                <template #label>
                  <el-image class="icon" src="../img/icon/scoin.svg"></el-image>
                  s币
                </template>
                {{this.user.userInfo.scoin}}
              </el-descriptions-item>
              <el-descriptions-item label-align="center" align="center">
                <template #label>
                  <i class="el-icon-mobile-phone"></i>
                  手机号码
                </template>
                {{this.user.userInfo.phone}}
              </el-descriptions-item>
            </el-descriptions>
            <!--个人信息end-->
            <el-card style="margin-top: 25px;padding: 25px">
              <el-row>
                <h3>等级说明:</h3>
              </el-row>
              <el-row>
                1.用户等级分为1-8级<br>
                2.每次投币获取5点成长值，且获得一个s币<br>
                3.消耗1个s币获取10点成长值<br>
                4.用户每天自动获得1个硬币
              </el-row>
              <el-row>
                <h3>投稿说明:</h3>
              </el-row>
              <el-row>
                1.服务器资源有限，每天只能投稿5个稿件<br>
                2.视频投稿大小不超过100MB，文件投稿不超过50MB<br>
                3.稿件每获得5次投币获得1个硬币，上限100个<br>
                4.稿件每获得1次投币,增加2点成长值,上限1000点
              </el-row>
            </el-card>
            <!--编辑个人信息弹框-->
            <el-dialog title="修改个人信息" v-model="dialogFormVisible">
              <el-form :model="userForm" label-position="right">
                <el-form-item label="手机号" label-width="100px">
                  <el-input onkeyup="value=value.replace(/[^\d]/g,'')" maxlength="11" placeholder="请输入手机号"
                            v-model="userForm.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="出生日期" label-width="100px">
                  <el-date-picker v-model="userForm.birthday" value-format="YYYY-MM-DD"
                                  type="date" placeholder="选择日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="性别" label-width="100px">
                  <el-radio-group v-model="userForm.sex">
                    <el-radio label="M">男</el-radio>
                    <el-radio label="F">女</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-form>
              <template #footer>
                <span class="dialog-footer">
                  <el-button @click="dialogFormVisible = false">取 消</el-button>
                  <el-button type="primary" @click="updateUser">确 定</el-button>
                </span>
              </template>
            </el-dialog>
            <!--编辑个人信息弹框end-->
          </div>
        </div>
        <div v-show="activeIndex=='subscribe'">
          <el-card v-for="user in subscribeList" style="width: 550px;padding: 13px;margin-top: 15px">
            <el-avatar :src="src+user.avatar">user</el-avatar>
            <div style="display: inline-block;position: relative;left: 10px;top: -10px">
              <span>{{user.username}}</span>
            </div>
            <el-button type="info" size="small" style="float: right;top: -50px"
                       @click="subscribe(user.uid)">已关注</el-button>
          </el-card>
        </div>
        <div v-show="activeIndex=='wallet'">
          <el-empty></el-empty>
        </div>
        <div v-show="activeIndex=='videoCheck'">
          <div style="position: relative">
            <div style="display: inline">
              <video style="width: 640px;height: 360px;" controls="controls"
                     id="videoPlay" autoplay></video>
            </div>
            <div style="display: inline;position: absolute;width:500px;left: 660px;height: 360px">
              <p>标题:{{this.currentVideo.title}}</p>
              <p>简介:{{this.currentVideo.introduction}}</p>
              <p>封面:</p>
              <el-image style="width: 360px;height:190px" v-if="currentVideo!=''"
                        :src="src+currentVideo.posterPath"></el-image>
            </div>
            <div>
              <br><el-radio v-model="radio" label="2">审核通过</el-radio>
              <el-radio v-model="radio" label="3">审核不通过</el-radio><br><br>
              <div v-if="radio=='3'">理由<el-input v-model="reason" style="width: 600px"></el-input></div>
              <br><el-button type="primary" @click="submitCheckVideo">提交审核</el-button><br><br>
            </div>
          </div>
          <el-space wrap>
            <el-card class="card" v-for="(video,index) in checkVideo.data" :key="video.svid">
              <div class="play_box">
                <a @click="play(video)">
                  <el-image class="video_list" :src="src+video.posterPath"></el-image>
                </a>
                <div class="title">{{video.title}}</div>
                <div class="video_detail">
                  <div style="display: inline;margin-right: 65px">
                    <el-image src="../img/icon/playNum.png"></el-image>
                    <span>{{video.playNum}}</span>
                  </div>
                  <div style="display: inline">
                    <el-image src="../img/icon/time.png"></el-image>
                    <span>{{video.createTime.substring(0,10)}}</span>
                  </div><br>
                  <div style="display: inline">
                    <el-image src="../img/icon/user.png"></el-image>
                    <span>{{video.username}}</span>
                  </div>
                </div>
                <a class="icon_play" @click="play(video)"></a>
              </div>
            </el-card>
            <!--视频列表end-->
          </el-space>
          <el-pagination
              background
              hide-on-single-page="true"
              page-size="10"
              :page-count="checkVideo.totalPage"
              :current-page="checkVideo.currentPage"
              @current-change="currentChange"
              layout="prev, pager, next"
              :total="checkVideo.totalSize">
          </el-pagination>
        </div>
        <div v-show="activeIndex=='message'">
          <el-empty></el-empty>
        </div>
      </el-main>
    </el-container>
    <!--底栏容器-->
    <el-footer class="el-footer">
      <div class="footer">
        <div class="header"><p>weshare 视频文件共享交流平台</p></div>
        <div class="github">
          <a href="https://github.com/liuxianchun/weshare" target="_blank">
            <div class="github-but"></div>
          </a>
        </div>
        <div class="mod_help">
          <p>
            <el-link href="/view/home" :underline="false">首页</el-link>
            <span>|</span>
            <el-link href="https://github.com/liuxianchun" :underline="false">关于我们</el-link>
            <span>|</span>
            <el-link href="https://github.com/liuxianchun" :underline="false">联系我们</el-link>
          </p>
          <p class="coty">版权所有 &copy; 2012-2021</p>
        </div>
      </div>
    </el-footer>
    <!--底栏容器end-->
  </el-container>
</div>

</body>
</html>